<template>
	<view>
		<!--header-->
		<view style="background-color: #F8F7F7" class="tui-mybg-box">
			<image v-if="pagestyleconfig.userstylebgimg" :src="pagestyleconfig.userstylebgimg" class="tui-my-bg"
				mode="widthFix"></image>
			<view class="tui-header-center" :style="{ paddingTop: height + 'px' }">
				<image :src="memberinfo.userpic || '/static/images/my/mine_def_touxiang_3x.png'" class="tui-avatar"></image>
				<view class="tui-info" v-if="memberinfo.telephone">
					<view class="tui-nickname">{{ memberinfo.nickname }}</view>
					<view v-if="memberinfo.gname" class="tui-explain">{{ memberinfo.gname }}</view>
					<!-- 	<tui-button v-if="memberinfo.is_vip == 0" type="green" width="80rpx" height="40rpx" shape="circle"
						size="18" @click="navigateTo('/pagesA/my/userInfo/vip')" style="margin-top: 40rpx;color:#fff;">
						升级
					</tui-button> -->
				</view>

				<view class="tui-login" v-else @click="login">
					<text style="color: #666666;">登录/注册</text>
					<tui-icon name="arrowright" color="#fff" :size="36" unit="rpx"></tui-icon>
				</view>

				<view class="tui-btn-edit" v-if="memberinfo.telephone">
					<u-icon name="setting" size="20" @click="onNav('/pagesA/my/userInfo/userInfo')"></u-icon>
					<!-- <tui-button type="white" :plain="true" shape="circle" width="92rpx" height="40rpx" :size="22"
						@click="navigateTo('/pagesA/my/userInfo/userInfo')">编辑</tui-button> -->
				</view>
			</view>

			<!-- <view class="tui-btn-setup"><tui-icon name="setup" color="#fff" @tap="navigateTo('/pagesA/my/userInfo/userInfo')"></tui-icon></view> -->

			<view class="tui-header-btm">
				<view @click="onNav('/pagesA/my/recharge/recharge')" class="tui-btm-item">
					<view class="tui-btm-num">{{ memberinfo.balance }}</view>
					<view class="tui-btm-text">余额</view>
				</view>
				<view @tap="onNav('/pagesA/my/points/points')" class="tui-btm-item">

					<view class="tui-btm-num">
						{{ memberinfo.points }}
						<!-- <text>{{ memberinfo.points }}</text> -->
						<!-- <view class="tui-badgewhite-dot"></view> -->
					</view>
					<view class="tui-btm-text">积分</view>
				</view>
				<view @click="onNav('/pagesA/my/myCoupon/myCoupon')" class="tui-btm-item">
					<view class="tui-btm-num">{{ couponList }}</view>
					<view class="tui-btm-text">优惠券</view>
				</view>
			</view>
		</view>
		<view class="tui-content-box">
			<!-- 		<view v-if="is_submitaudit!=1" class="vip-box" style="margin-bottom: 20rpx;">
				<tui-list-cell backgroundColor="#5c5c5c" :arrow="false" :hover="false" padding="0" unlined
					:lineLeft="false" @click="navigateTo('/pagesA/my/vip_paid/index')">
					<view class="vip-box-header">
						<view class="vip-box-title">{{memberinfo.gname ? memberinfo.gname : 'VIP会员卡'}}</view>
						<view class="tui-ml-auto">
							<button class="vip-box-but">{{memberinfo.gid ? '升级会员' : '立即开通'}}</button>
						</view>
					</view>
				</tui-list-cell>
			</view> -->

			<view class="tui-box tui-tool-box" v-for="(item, index) in menulist" :key="index">
				<tui-list-cell :arrow="true" padding="0" unlined :lineLeft="false" v-if="index == 'order'">
					<view class="tui-cell-header">
						<view class="tui-cell-title">{{ item.title }}</view>
					</view>
				</tui-list-cell>

				<view class="tui-tool-list tui-flex-wrap">
					<block v-for="(sonitem, sonindex) in item.list" :key="sonindex">
						<button v-if="sonitem.plugin == 'contact'" open-type="contact" class="tui-tool-item"
							style="margin-left: 0;">
							<view class="tui-icon-box">
								<image src="/static/images/mall/my/icon_kefu_tool.png" class="tui-tool-icon"></image>
							</view>
							<view class="tui-tool-text">{{ sonitem.title }}</view>
						</button>
						<view v-else-if="sonitem.plugin == 'tel'" class="tui-tool-item" style="margin-left: 0;"
							@tap="tokefuTel">
							<view class="tui-icon-box">
								<image :src="sonitem.icon" class="tui-tool-icon"></image>
							</view>
							<view class="tui-tool-text">{{ sonitem.title }}</view>
						</view>
						<view v-else-if="sonitem.plugin == 'privacy'" class="tui-tool-item" style="margin-left: 0;"
							@tap="showuserprivacyAlert">
							<view class="tui-icon-box">
								<image :src="sonitem.icon" class="tui-tool-icon"></image>
							</view>
							<view class="tui-tool-text">{{ sonitem.title }}</view>
						</view>
						<view v-else-if="sonitem.plugin == 'aboutus'" class="tui-tool-item" style="margin-left: 0;"
							@tap="showaboutusAlert">
							<view class="tui-icon-box">
								<image :src="sonitem.icon" class="tui-tool-icon"></image>
							</view>
							<view class="tui-tool-text">{{ sonitem.title }}</view>
						</view>
						<view v-else class="tui-tool-item" style="margin-left: 0;" @tap="onNav(sonitem.pagepath)">
							<view class="tui-icon-box">
								<image :src="sonitem.icon" class="tui-tool-icon"></image>
							</view>
							<view class="tui-tool-text">{{ sonitem.title }}</view>
						</view>
					</block>
				</view>
			</view>

			<view style="margin-bottom: 50px;"></view>

			<!--为你推荐-->
			<block v-if="recommendgoods.length > 0">
				<tui-divider :size="28" :bold="true" color="#333" width="50%">为你推荐</tui-divider>
				<view class="tui-product-list">
					<view class="tui-product-container">
						<block v-for="(item, index) in recommendgoods" :key="index">
							<!--商品列表-->
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150"
								@tap="onNav('/pages/goodsDetail/goodsDetail?id=' + item.id)">
								<image :src="item.pic" class="tui-pro-img" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{ item.name }}</view>
									<view>
										<view class="tui-pro-price">
											<text v-if="item.is_points_goods == 1"
												class="tui-sale-price">积分:{{ item.pay_points }}</text>
											<text v-if="item.is_points_goods != 1"
												class="tui-sale-price">￥{{ item.price }}</text>
											<text v-if="item.costs > 0"
												class="tui-factory-price">￥{{ item.costs }}</text>
										</view>
										<view class="tui-pro-pay">{{ item.sale_count }}人付款</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</block>
			<tui-modal :show="loginmodal" custom :padding="0">
				<view class="tui-modal-custom">
					<!-- <view class="topbg">
						 <image class="" src="@/static/images/bg_hometop.png"></image>
					</view> -->
					<!-- <view class="tutle-moal">
						登录后可体验更多功能 
					</view> -->
					<view class="innercont">
						<view class="tui-modal-custom-text">
							<view class="inneerone">
								<!-- #ifdef MP-WEIXIN -->
								<button class="button-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
									<view class="image-wrapper">
										<image v-if="avatarUrl == ''" class="avatar-default" mode="aspectFit"
											src="@/static/images/default_img.png"></image>
										<image v-else class="avatar" :src="avatarUrl"></image>
										<text v-if="avatarUrl == ''">选择头像</text>
									</view>
								</button>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
								<button class="button-wrapper" @tap="chooseImg">
									<view class="image-wrapper">
										<image v-if="avatarUrl == ''" class="avatar-default" mode="aspectFit"
											src="@/static/images/default_img.png"></image>
										<image v-else class="avatar" :src="avatarUrl"></image>

										<text v-if="avatarUrl == ''">选择头像</text>
									</view>
								</button>

								<!-- #endif -->
							</view>
							<view class="inputcont" style="margin-top: 40rpx;margin-bottom: 40rpx;">
								<!-- <view class="label">
									昵称：
								</view> -->
								<!-- #ifdef MP-WEIXIN -->
								<input v-model="nickname" @blur="inputnick" @input="inputnick" type="nickname" class=""
									placeholder="请输入用户名称" />
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
								<input v-model="nickname" @blur="inputnick" @input="inputnick" class=""
									placeholder="请输入用户名称" />
								<!-- #endif -->
							</view>
						</view>
						<tui-button height="70rpx" :size="28" type="priamry" @click="gologin">确认登录</tui-button>
						<view class="" style="margin-top: 30rpx;"><tui-button height="70rpx" :size="28" type="primary"
								plain @click="cancellogin">暂不登录</tui-button></view>
					</view>
				</view>
			</tui-modal>
		</view>

		<tui-modal :show="showuserprivacy" custom title="用户隐私">
			<view class="tui-modal-custom">
				<scroll-view :style="'height:' + (modeHeight - 360) + 'px'" scroll-y="true">
					<view class="tui-modal-custom-text"><rich-text :nodes="userprivacy.content"></rich-text></view>
				</scroll-view>
				<tui-button height="72rpx" :size="28" type="primary" shape="circle" @click="hideuserprivacyAlert"
					style="margin-top: 20rpx;">确认</tui-button>
			</view>
		</tui-modal>

		<tui-modal :show="showaboutus" custom title="关于我们">
			<view class="tui-modal-custom">
				<scroll-view :style="'height:' + (modeHeight - 360) + 'px'" scroll-y="true">
					<view class="tui-modal-custom-text"><rich-text :nodes="aboutus.content"></rich-text></view>
				</scroll-view>
				<tui-button height="72rpx" :size="28" type="primary" shape="circle" @click="hideaboutusAlert"
					style="margin-top: 20rpx;">确认</tui-button>
			</view>
		</tui-modal>

		<tui-tabbar :current="current"></tui-tabbar>
	</view>
</template>

<script>
	export default {
		name: 'userinfo',
		components: {},
		data() {
			return {
				ProfileRes: {},
				avatarUrl: '',
				nickname: '',
				loginmodal: false,
				memberinfo: [],
				current: '',
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				scrollTop: 0.5,
				agentconfig: [],
				pagestyleconfig: [],
				recommendgoods: [],
				module: this.$module,
				menulist: [],
				is_submitaudit: 1,
				showuserprivacy: false,
				showaboutus: false,
				userprivacy: {},
				aboutus: {},
				width: 0,
				height: 0,
				telephone: '',
				modeHeight: 0,
				couponList: 0
			};
		},
		onLoad: function(e) {
            if(uni.getStorageSync('userInfo')){
                this.memberinfo = uni.getStorageSync('userInfo')['memberInfo'];
            }

			this.getCoupons()
			let _this = this;
			this.current = '/' + this.__route__;
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: res => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.scrollH = res.windowWidth * 0.6;
					this.modeHeight = res.windowHeight;
				}
			});

			_this.$request.post('usermenu.list', {}).then(res => {
				if (res.errno == 0) {
					_this.menulist = res.data;
				}
			});

			_this.$request.get('Goods.recommend').then(res => {
				if (res.errno == 0) {
					_this.recommendgoods = res.data;
				}
			});

			_this.$request.post('config').then(res => {
				if (res.errno == 0) {
					_this.module = res.data.module;
				}
			});
			_this.$request
				.post('config', {
					mo: 'agent'
				})
				.then(res => {
					if (res.errno == 0) {
						_this.agentconfig = res.data;
					}
				});
			_this.$request
				.post('config', {
					mo: 'pagestyle'
				})
				.then(res => {
					if (res.errno == 0) {
						_this.pagestyleconfig = res.data;
					}
				});

			_this.$request
				.post('Agreement.index', {
					code: 'userprivacy'
				})
				.then(res => {
					if (res.errno == 0) {
						res.data.content = _this.textFormat(res.data.content);
						_this.userprivacy = res.data;
					}
				});

			_this.$request
				.post('Agreement.index', {
					code: 'aboutus'
				})
				.then(res => {
					if (res.errno == 0) {
						res.data.content = _this.textFormat(res.data.content);
						_this.aboutus = res.data;
					}
				});

			_this.$request
				.post('config', {
					mo: 'common'
				})
				.then(res => {
					console.log(res);
					if (res.errno == 0) {
						if (res.data.TELEPHONE) {
							_this.telephone = res.data.TELEPHONE;
						}
					}
				});

			// uni.getSystemInfo({
			// 	success: res => {
			// 		this.width = res.windowWidth;
			// 		this.height = res.windowHeight;
			// 	}
			// });
		},
		onShow: function() {
			let _this = this;
			_this.$util.getUserInfo(function(userInfo) {
				_this.$request
					.get('member.detail', {
						samkey: new Date().valueOf()
					})
					.then(res => {
						if (res.errno == 0) {
							_this.memberinfo = res.data;
							_this.is_submitaudit = res.data.is_submitaudit;
						}
					});
			});
		},
		methods: {
			getCoupons: function() { // 读取可领取券列表
				var _this = this;
				_this.$request.get('couponreceive.mylist', {
					ptype: '0',
					samkey: (new Date()).valueOf()
				}).then(res => {
					if (res.errno == 0) {
						_this.couponList = res.data.length;
					}
				})
			},
			textFormat(val) {
				if (val) {
					console.log(val);
					let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#');
					newString = newString.replace(/_#_@/g, '<br/>'); // IE7-8
					newString = newString.replace(/_@/g, '<br/>'); // IE9、FF、chrome
					newString = newString.replace(/&nbsp;/g, '\xa0');
					newString = newString.replace(/ /g, '\xa0');
					return newString;
				}
			},
			tokefuTel: function(e) {
				console.log(this.telephone);
				//客服电话
				uni.makePhoneCall({
					phoneNumber: this.telephone
				});
			},
			showuserprivacyAlert() {
				this.showuserprivacy = true;
			},
			showaboutusAlert() {
				this.showaboutus = true;
			},
			hideuserprivacyAlert() {
				this.showuserprivacy = false;
			},
			hideaboutusAlert() {
				this.showaboutus = false;
			},
			inputnick(e) {
				console.log(e, this.nickname);
			},
			gologin() {
				if (!this.avatarUrl) {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return;
				}
				if (!this.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}
				var _this = this;
				uni.showLoading({
					title: '正在登录...'
				});
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: function(ProfileRes) {
						console.log('getUserProfile success : ', ProfileRes);
						_this.$util.getUserInfo(function() {
							ProfileRes.userInfo.avatarUrl = _this.avatarUrl;
							ProfileRes.userInfo.nickName = _this.nickname;
							_this.$request.post('member.detail', ProfileRes.userInfo).then(res => {
								if (res.errno == 0) {
									_this.memberinfo = res.data;
									_this.loginmodal = false;
								}
							});
						});
					},
					fail: function(res) {
						console.log('getUserProfile fail : ', res);
					}
				});
				// #endif
				// #ifdef MP-TOUTIAO
				let ProfileRes = this.ProfileRes;
				_this.$util.getUserInfo(function() {
					ProfileRes.userInfo.avatarUrl = _this.avatarUrl;
					ProfileRes.userInfo.nickName = _this.nickname;
					_this.$request.post('member.detail', ProfileRes.userInfo).then(res => {
						if (res.errno == 0) {
							_this.memberinfo = res.data;
							_this.loginmodal = false;
						}
					});
				});
				// #endif
			},
			cancellogin() {
				this.loginmodal = false;
			},
			onChooseAvatar(e) {
				console.log(12212);
				console.log(e, 12212);
				const {
					avatarUrl
				} = e.detail;
				this.$request.uploadFile(avatarUrl).then(res => {
					console.log(res, 111);
					this.avatarUrl = res.data;
				});
			},
			chooseImg: function() {
				console.log('1111111');
				var _this = this;
				uni.chooseImage({
					count: 1,
					// 默认9
					sizeType: ['original', 'compressed'],
					// 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					// 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePath = res.tempFilePaths[0];
						console.log('tempFilePath: ', tempFilePath);
						_this.$request.uploadFile(tempFilePath).then(res => {
							console.log(res);
							_this.avatarUrl = res.data;
						});
					}
				});
			},
			initNavigation(e) {
				this.opacity = e.opacity;
				this.top = e.top;
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			onNav(page) {
				if (!this.memberinfo.telephone) {
					// #ifdef H5
					page = '/pages/login/loginH5'
					// #endif
					// #ifdef MP
					page = '/pages/login/phoneLogin'
					// #endif
				}
				uni.navigateTo({
					url: page
				});
			},
			login: function() {
				let _this = this;
				// #ifdef H5
				_this.$util.getmpuserinfo();
				// #endif

				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '/pages/login/login?ptype=member'
				});
				// #endif

				// #ifdef MP-WEIXIN ||  MP-TOUTIAO
				uni.redirectTo({
					url: "/pages/login/phoneLogin"
				})
				// #endif
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
		},
		onReachBottom: function() {}
	};
</script>
<style>
	.tui-modal-normal {
		overflow: hidden;
	}

	.tutle-moal {
		position: relative;
		z-index: 2;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	.tui-modal-custom {
		position: relative;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.innercont {
		padding-top: 60rpx;
		position: relative;
		z-index: 2;
		/* background-color: #fff; */
		padding: 50rpx;
	}

	.tui-modal-custom-text {}

	.inneerone {}

	.topbg {
		position: absolute;
		width: 100%;
		height: 200rpx;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.topbg>image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.inputcont {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #edf0f2;
		border-radius: 8rpx;
	}

	.inputcont .label {}

	.button-wrapper {
		margin-bottom: 16rpx;
		width: 100%;
		/* height: 128rpx; */
		padding: 0;
		background-color: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button-wrapper::after {
		border: none;
	}

	.image-wrapper {
		width: 150rpx;
		/* height: 180rpx; */
		border-radius: 8rpx;
		overflow: hidden;
		/* background-color: #E1E6F0; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.avatar-default {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.image-wrapper text {
		font-size: 20rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.tui-header-box {
		width: 100%;
		padding: 0 30rpx 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	/* #ifndef MP */
	.tui-header-icon {
		min-width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* #endif */
	/* #ifdef MP */
	.tui-set-box {
		width: 123rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* #endif */
	.tui-icon-box {
		position: relative;
	}

	.tui-icon-setup {
		margin-left: 8rpx;
		float: right;
	}

	.tui-badge {
		position: absolute;
		font-size: 24rpx;
		height: 32rpx;
		min-width: 20rpx;
		padding: 0 6rpx;
		border-radius: 40rpx;
		right: 10rpx;
		top: -5rpx;
		transform: scale(0.8) translateX(60%);
		transform-origin: center center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.tui-badge-red {
		background: #f74d54;
		color: #fff;
	}

	.tui-badge-white {
		background: #fff;
		color: #f74d54;
	}

	.tui-badge-dot {
		position: absolute;
		height: 12rpx;
		width: 12rpx;
		border-radius: 50%;
		right: -12rpx;
		top: 0;
		background: #f74d54;
	}

	.tui-badgewhite-dot {
		position: absolute;
		height: 12rpx;
		width: 12rpx;
		border-radius: 50%;
		right: -12rpx;
		top: 0;
		background: #ebeea0;
	}

	.tui-mybg-box {
		width: 100%;
		/* height: 240rpx; */
		position: relative;
	}

	.tui-my-bg {
		width: 100%;
		height: 320rpx;
		display: block;
	}

	.tui-header-center {
		/* position: absolute; */
		width: 100%;
		/* height: 128rpx; */
		left: 0;
		bottom: 0;
		padding: 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-avatar {
		flex-shrink: 0;
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		display: block;
	}

	.tui-info {
		width: 60%;
		padding-left: 30rpx;
	}

	.tui-login {
		width: 60%;
		padding-left: 30rpx;
		font-size: 32rpx;
		line-height: 32rpx;
		color: #fff;
		display: flex;
		align-items: center;
	}

	.tui-nickname {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		display: flex;
		align-items: center;
	}

	.tui-img-vip {
		width: 56rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}

	.tui-explain {
		width: 80%;
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		opacity: 0.75;
		padding-top: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-btn-edit {
		flex-shrink: 0;
		padding-right: 22rpx;
	}

	.tui-btn-setup {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-header-btm {
		width: 100%;
		padding: 0;
		box-sizing: border-box;
		/* position: absolute; */
		left: 0;
		top: 150rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		color: #fff;
		margin-top: 60rpx;
	}

	.tui-btm-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #000000;
		/* position: absolute; */
		/* right: 0; */
		/* background: #f3ba61; */
		/* padding: 10rpx 20rpx; */
		/* border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		min-width: 200rpx; */
	}

	/* .tui-btm-item:nth-child(1) {
		top: 50%;
	}

	.tui-btm-item:nth-child(2) {
		top: 80%;
	}

	.tui-btm-item:nth-child(3) {
		top: 90%;
	} */

	.tui-btm-num {
		/* font-size: 32rpx; */
		/* font-weight: 600; */
		font-size: 30rpx;
		position: relative;
	}

	.tui-btm-text {
		font-size: 28rpx;
		opacity: 0.85;
		/* padding-top: 4rpx; */
		/* padding-right: 20rpx; */
		color: #3C3939;
		font-size: 20rpx;
		margin-top: 5rpx;
	}

	.tui-content-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		top: -100rpx;
		top: 20px;
		/*top: -72rpx;*/
		z-index: 10;
		padding-bottom: 100rpx;
	}

	.tui-box {
		width: 100%;
		background: #fff;
		/* box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1); */
		border-radius: 10rpx;
		overflow: hidden;
	}

	.vip-box {
		width: 100%;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 30rpx;
		overflow: hidden;
	}

	.vip-box-header {
		width: 100%;
		height: 118rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.vip-box-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #f5e3b1;
	}

	.vip-box-but {
		color: #503f35;
		font-size: 30rpx;
		background-color: #f8e6c0;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
	}

	.tui-order-box {
		/* height: 208rpx; */
	}

	.tui-cell-header {
		width: 100%;
		height: 74rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-cell-title {
		font-size: 28rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #000;
	}

	.tui-cell-sub {
		font-size: 26rpx;
		font-weight: 400;
		color: #999;
		padding-right: 28rpx;
	}

	.tui-order-list {
		width: 100%;
		/* height: 134rpx; */
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-item {
		width: 25%;
		/* flex: 1; */
		display: flex;
		/* float: left; */
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.tui-order-text,
	.tui-tool-text {
		font-size: 26rpx;
		font-weight: 400;
		color: #333;
		padding-top: 4rpx;
	}

	.tui-tool-text {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 20rpx;
	}

	.tui-order-icon {
		width: 56rpx;
		height: 56rpx;
		display: block;
	}

	.tui-assets-box {
		height: 118rpx;
		margin-top: 20rpx;
		padding-top: 30rpx;
	}

	.tui-assets-list {
		height: 84rpx;
	}

	.tui-assets-num {
		font-size: 38rpx;
		font-weight: 500;
		color: #333;
		font-weight: bold;
		position: relative;
	}

	.tui-assets-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #666;
		padding-top: 6rpx;
	}

	.tui-tool-box {
		margin-top: 20rpx;
	}

	.tui-flex-wrap {
		flex-wrap: wrap;
		height: auto;
	}

	.tui-tool-list {
		width: 100%;
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-tool-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.tui-tool-icon {
		width: 64rpx;
		height: 64rpx;
		display: block;
	}

	.tui-tool-liicon {
		width: 50rpx;
		height: 50rpx;
		display: block;
	}

	.tui-badge-icon {
		width: 66rpx;
		height: 30rpx;
		position: absolute;
		right: 0;
		transform: translateX(88%);
		top: -15rpx;
	}

	/*为你推荐*/
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-product-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.tui-pro-item {
		background: #fff;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 12rpx;
		width: 48%;
		margin-left: 1%;
		margin-right: 1%;
		margin-bottom: 2%;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-list-cell::before {
		display: none;
	}
</style>